<template>
  <el-row>
    <el-col :span="14">
      <el-card class="card-height">
        <div slot="header" class="clearfix">
          <span>代办任务</span>
          <el-tooltip class="item-tip" effect="light" placement="bottom-start">
            <div slot="content" class="tip-content">
              <p>待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件</p>
              <p>待派送率=待派送/(待派送+派送中+已签收+拒收)</p>
              <p>未分配率=未分配/全部数据</p>
              <p>超时率=超时任务/(已完成+进行中+已取消)</p>
            </div>
            <i class="el-icon-question" style="font-size:16px;margin-left:8px" />
          </el-tooltip>
          <!--  -->
          <i style="float: right; padding: 3px 0" class="el-icon-refresh">2023-02-15 16:47 - 2023-02-17 23:59</i>
        </div>
        <!-- 水球图 -->
        <div ref="water" class="water" />
        <div class="loading-work">
          <span>待取件{{ backlog.waitingPickupNumber }}</span>
          <span>待派件{{ backlog.waitingDispatchNumber }}</span>
          <span>未运输分配{{ backlog.unassignedTransportTaskNumber }}</span>
          <span>超时运输{{ backlog.timeoutTransportTaskNumber }}</span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="10">
      <el-card class="card-height">
        <div slot="header" class="clearfix">
          <span>执行中任务</span>
          <el-tooltip class="item" effect="light" placement="bottom-start">
            <div slot="content" class="tip-content">
              <p>运输率=运输中/(全部订单-待取件-已取件-网点入库-待装车-已取消)</p>
              <p>派送率=派送中/(待派送+派送中+已签收+拒收)</p>
            </div>
            <i class="el-icon-question" style="font-size:16px;margin-left:8px" />
          </el-tooltip>
          <i style="float: right; padding: 3px 0" class="el-icon-refresh">2023-02-15 14:36</i>
        </div>
        <div ref="watering" class="water" />
        <div class="loading-work">
          <span>运输中{{ todayData.taskInTransitNumber }}</span>
          <span>派送中{{ todayData.taskInDeliveryNumber }}</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>

import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {

  props: {
    backlog: {
      type: Object,
      default: null
    },
    todayData: {
      type: Object,
      default: null
    }
  },

  mounted() {
    this.initEchartsWater()
    this.initEchartsWatering()
  },
  methods: {
    initEchartsWater() {
      const myChart = echarts.init(this.$refs.water)
      const option = {
        series: [
          {
            type: 'liquidFill',
            data: [this.backlog.waitingPickupRate / 100],
            //          data: [this.rate[1], 0.5, 0.4, 0.3],
            radius: '60%',
            center: ['12.5%', '50%'],
            // 水球颜色
            // color: ['#49d088', '#38b470', '#2aaf66'],
            color: ['#e15536', '#000'],
            // outline  外边
            outline: {
            // show: false
              borderDistance: 5,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#e15536'
              }
            },
            label: {
              normal: {
                textStyle: {
                  color: '#000',
                  // insideColor: 'white',
                  fontSize: 12
                }
              }
            },
            // 内图 背景色 边
            backgroundStyle: {
              color: '#fff1d9'
            }
          },
          {
            type: 'liquidFill',
            data: [this.backlog.waitingDispatchRate / 100],
            //          data: [this.rate[1], 0.5, 0.4, 0.3],
            radius: '60%',
            center: ['37.5%', '50%'],
            // 水球颜色
            // color: ['#49d088', '#38b470', '#2aaf66'],
            color: ['#ffc45e', '#000'],
            // outline  外边
            outline: {
            // show: false
              borderDistance: 5,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#ffc45e'
              }
            },
            label: {
              normal: {
                textStyle: {
                  color: '#000',
                  // insideColor: 'white',
                  fontSize: 12
                }
              }
            },
            // 内图 背景色 边
            backgroundStyle: {
              color: '#fff1d9'
            }
          }, {
            type: 'liquidFill',
            data: [this.backlog.unassignedTransportTaskRate / 100],
            //          data: [this.rate[1], 0.5, 0.4, 0.3],
            radius: '60%',
            center: ['62.5%', '50%'],
            // 水球颜色
            // color: ['#49d088', '#38b470', '#2aaf66'],
            color: ['#ff9b41', '#000'],
            // outline  外边
            outline: {
            // show: false
              borderDistance: 5,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#ff9b41'
              }
            },
            label: {
              normal: {
                textStyle: {
                  color: '#000',
                  // insideColor: 'white',
                  fontSize: 12
                }
              }
            },
            // 内图 背景色 边
            backgroundStyle: {
              color: '#fff1d9'
            }
          }, {
            type: 'liquidFill',
            data: [this.backlog.timeoutTransportTaskRate / 100],
            //          data: [this.rate[1], 0.5, 0.4, 0.3],
            radius: '60%',
            center: ['87.5%', '50%'],
            // 水球颜色
            // color: ['#49d088', '#38b470', '#2aaf66'],
            color: ['#edde83', '#000'],
            // outline  外边
            outline: {
            // show: false
              borderDistance: 5,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#edde83'
              }
            },
            label: {
              normal: {
                textStyle: {
                  color: '#000',
                  // insideColor: 'white',
                  fontSize: 12
                }
              }
            },
            // 内图 背景色 边
            backgroundStyle: {
              color: '#fff1d9'
            }
          }]
      }
      option && myChart.setOption(option)
    },
    initEchartsWatering() {
      const myChart = echarts.init(this.$refs.watering)
      const option = {
        series: [
          {
            type: 'liquidFill',
            data: [this.todayData.taskInTransitRate / 100],
            //          data: [this.rate[1], 0.5, 0.4, 0.3],
            radius: '60%',
            center: ['25%', '50%'],
            // 水球颜色
            // color: ['#49d088', '#38b470', '#2aaf66'],
            color: ['#e15536', '#000'],
            // outline  外边
            outline: {
            // show: false
              borderDistance: 5,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#e15536'
              }
            },
            label: {
              normal: {
                textStyle: {
                  color: '#000',
                  // insideColor: 'white',
                  fontSize: 12
                }
              }
            },
            // 内图 背景色 边
            backgroundStyle: {
              color: '#fff1d9'
            }
          },
          {
            type: 'liquidFill',
            data: [this.todayData.taskInDeliveryRate / 100],
            //          data: [this.rate[1], 0.5, 0.4, 0.3],
            radius: '60%',
            center: ['75%', '50%'],
            // 水球颜色
            // color: ['#49d088', '#38b470', '#2aaf66'],
            color: ['#ffc45e'],
            // outline  外边
            outline: {
            // show: false
              borderDistance: 5,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#ffc45e'
              }
            },
            label: {
              normal: {
                textStyle: {
                  color: '#000',
                  // insideColor: 'white',
                  fontSize: 12
                }
              }
            },
            // 内图 背景色 边
            backgroundStyle: {
              color: '#fff1d9'
            }
          }]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.tip-content{
  color: #ccc;

}

::v-deep .el-tooltip__popper{
  border:1px solid red!important;
}
.water{
  height: 208px;
}
.loading-work{
  display: flex;
  // justify-content: space-around;
  position: relative;
  top: -20px;
  span{
    flex: 25%;
    text-align: center;
    font-weight: 700;
  }
}
.card-height{
  height: 300px !important;
}
</style>
